Grids AI Column Demos: Add Descriptions #31830
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds description files for the AI Columns demo in both DataGrid and TreeList components. These descriptions document the new AI column feature, which allows components to generate additional data fields using AI/LLM integration.
Key Changes
- New demo documentation explaining AI column integration and configuration
- Instructions for setting up AI columns with proper API references
- Explanation of how to optimize AI resource usage via the
onAIColumnRequestCreatinghandler
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/demos/Demos/DataGrid/AIColumns/description.md | Adds comprehensive documentation for AI columns feature in DataGrid, including setup instructions and configuration details |
| apps/demos/Demos/TreeList/AIColumns/description.md | Adds comprehensive documentation for AI columns feature in TreeList, mirroring the DataGrid documentation with TreeList-specific API references |
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
|
|
||
| [note] | ||
|
|
||
| AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of DataGrid AI Columns. |
There was a problem hiding this comment.
The phrase "rate and data limited" should use hyphens to form proper compound adjectives: "rate-limited and data-limited". When multiple words function together as an adjective before a noun or verb, they should be hyphenated. This matches the style already used in "performance-related" and "AI-powered" elsewhere in the document.
| AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of DataGrid AI Columns. | |
| AI services used for this demo have been rate-limited and data-limited. As such, you may experience performance-related delays when exploring the capabilities of DataGrid AI Columns. |
|
|
||
| [note] | ||
|
|
||
| AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of TreeList AI Columns. |
There was a problem hiding this comment.
The phrase "rate and data limited" should use hyphens to form proper compound adjectives: "rate-limited and data-limited". When multiple words function together as an adjective before a noun or verb, they should be hyphenated. This matches the style already used in "performance-related" and "AI-powered" elsewhere in the document.
| AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of TreeList AI Columns. | |
| AI services used for this demo have been rate-limited and data-limited. As such, you may experience performance-related delays when exploring the capabilities of TreeList AI Columns. |
Co-authored-by: Elena Khamlyuk <[email protected]> Signed-off-by: Arman Boyakhchyan <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
|
|
||
| [/note] | ||
|
|
||
| This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. |
There was a problem hiding this comment.
For consistency with the TreeList description (line 13), consider adding "default" before "prompt": "This demo implements a default prompt that instructs AI..."
| This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. | |
| This demo implements a default prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. |
|
|
||
| This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. | ||
|
|
||
| To integrate an AI column into your DevExtreme DataGrid, you must: |
There was a problem hiding this comment.
Inconsistent phrasing between DataGrid and TreeList descriptions. DataGrid uses "you must:" while TreeList uses "do the following:". Consider standardizing to one format across both demos for consistency.
| To integrate an AI column into your DevExtreme DataGrid, you must: | |
| To integrate an AI column into your DevExtreme DataGrid, do the following: |
|
|
||
| [/note] | ||
|
|
||
| This demo implements a prompt that instructs AI to identify the department of each employee. You can modify the default prompt or enter a custom prompt in the AI column's header menu. |
There was a problem hiding this comment.
Inconsistent possessive usage. TreeList uses "AI column's header menu" while DataGrid uses "AI column header menu". Consider standardizing to one format across both descriptions.
| This demo implements a prompt that instructs AI to identify the department of each employee. You can modify the default prompt or enter a custom prompt in the AI column's header menu. | |
| This demo implements a prompt that instructs AI to identify the department of each employee. You can modify the default prompt or enter a custom prompt in the AI column header menu. |
| - Configure [aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) (or **columns[]**.**ai**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#aiIntegration)). | ||
| - Set a column's [type](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#type) to *"ai"*. | ||
| - Specify the column [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name). | ||
| - Configure **columns[]**.**ai** options, such as generation [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row). |
There was a problem hiding this comment.
Inconsistent phrasing between DataGrid and TreeList. DataGrid uses "such as generation" while TreeList uses "including the generation". Consider standardizing the phrasing across both descriptions.
| - Configure **columns[]**.**ai** options, such as generation [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row). | |
| - Configure **columns[]**.**ai** options, including the generation [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row). |
|
|
||
| - Configure [aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) (or **columns[]**.**ai**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#aiIntegration)). | ||
| - Set a column's [type](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#type) to *"ai"*. | ||
| - Specify the column [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name). |
There was a problem hiding this comment.
Inconsistent possessive usage. TreeList description uses "column's" (line 19) while DataGrid uses "column" without the possessive. Consider standardizing to match: either "Specify the column [name]" or "Specify the column's [name]" in both files.
| - Specify the column [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name). | |
| - Specify the column's [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name). |
|
|
||
| [/note] | ||
|
|
||
| This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. |
There was a problem hiding this comment.
Inconsistent sentence structure between DataGrid and TreeList descriptions. DataGrid uses a single sentence with a relative clause ("a prompt that instructs"), while TreeList uses two sentences ("a default prompt... This prompt instructs"). Consider using consistent structure across both descriptions.
| This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. | |
| This demo implements a default prompt for the AI column. This prompt instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. |
Co-authored-by: Elena Khamlyuk <[email protected]> Signed-off-by: Arman Boyakhchyan <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
Signed-off-by: Arman Boyakhchyan <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| - Specify the column [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name). | ||
| - Configure **columns[]**.**ai** options, such as generation [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row). | ||
|
|
||
| Our DevExtreme DataGrid component uses all visible row data in AI requests, including unbound and hidden column fields. This data gives LLMs broader context, but increases the component use of AI resources. To limit data included in AI requests, modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter in the [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating) event handler. No newline at end of file |
There was a problem hiding this comment.
The description of the data limiting feature is inconsistent with the TreeList demo description. The TreeList version mentions "This demo also configures the onAIColumnRequestCreating handler to limit data" and explains the default behavior more clearly. Consider rephrasing to: "This demo also configures the [onAIColumnRequestCreating]... handler to limit data included in AI requests. The default DataGrid behavior is to include all data from visible rows in AI requests, including data not bound to a column and data of hidden columns. This gives LLMs broader context, but increases the component's use of AI resources."
| Our DevExtreme DataGrid component uses all visible row data in AI requests, including unbound and hidden column fields. This data gives LLMs broader context, but increases the component use of AI resources. To limit data included in AI requests, modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter in the [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating) event handler. | |
| This demo also configures the [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating) handler to limit data included in AI requests. The default DataGrid behavior is to include all data from visible rows in AI requests, including data not bound to a column and data of hidden columns. This gives LLMs broader context, but increases the component's use of AI resources. |
|
|
||
| [/note] | ||
|
|
||
| This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu. |
There was a problem hiding this comment.
Missing article "the" before "AI column header menu". Should be "in the AI column header menu" for grammatical correctness.
| - Specify the column [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name). | ||
| - Configure **columns[]**.**ai** options, such as generation [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row). | ||
|
|
||
| Our DevExtreme DataGrid component uses all visible row data in AI requests, including unbound and hidden column fields. This data gives LLMs broader context, but increases the component use of AI resources. To limit data included in AI requests, modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter in the [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating) event handler. No newline at end of file |
There was a problem hiding this comment.
How about just
uses all row data
? Just all available data.
4 participants
No description provided.